<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>豆瓣Top250</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/mui.min.css">
  <link rel="stylesheet" href="../css/icons-extra.css">
  <style>
    .mui-content {
      background-color: #EEEEF3;
    }

    /* 当前页面内部样式 */
    .mui-slider {
      background-color: #fff;
    }

    .slider-bar {
      position: relative;
      min-height: 1px;
      width: 20%;
    }

    .db-movie-list {
      /* margin-bottom: 1rem; */
      background-color: #EEEEF3;
    }

    .db-movie-list .mui-media-object {
      max-width: 1.4rem;
      width: 1.4rem;
      height: auto;
    }

    .db-movie-list .mui-media-body {
      font-size: .38rem;
      line-height: .5rem;
    }

    .db-movie-list .mui-media-body .mui-ellipsis span {
      color: #ff6464;
    }

    /* */
    .db-movie-list {
      overflow: hidden;
    }

    .item {
      margin: 20px;
      border: 1px solid #ccc;
    }

    .item .num {
      color: firebrick;
      position: relative;
      text-align: center;
    }

    .item .num::after,
    .item .num::before {
      position: absolute;
      top: 45%;
      content: '';
      display: block;
      height: 1px;
      width: 40px;
      background-color: #ccc;
    }

    .item .num::after {
      right: 20%;
    }

    .item .num::before {
      left: 20%;
    }

    .mui-slider .mui-slider-group {
      line-height: 1px;
      background-color: #EEEEF3;
    }
  </style>
</head>

<body>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">豆瓣Top250</h1>
  </header>
  <div class="mui-content" id="app">
    <div id="slider" class="mui-slider" @slide="slideTop">
      <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <a class="mui-control-item" href="#item1mobile" @tap="tapTop(0)">
          Top1-50
        </a>
        <a class="mui-control-item" href="#item2mobile" @tap="tapTop(50)">
          51-100
        </a>
        <a class="mui-control-item" href="#item3mobile" @tap="tapTop(100)">
          101-150
        </a><a class="mui-control-item" href="#item4mobile" @tap="tapTop(150)">
          151-200
        </a><a class="mui-control-item" href="#item5mobile" @tap="tapTop(200)">
          201-250
        </a>
      </div>
      <div id="sliderProgressBar" class="mui-slider-progress-bar slider-bar"></div>
      <div class="mui-slider-group">
        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
          <div id="scroll1" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <ul class="mui-table-view">
              </ul>
            </div>
          </div>
        </div>
        <div id="item2mobile" class="mui-slider-item mui-control-content">
          <div id="scroll2" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="mui-loading">
                <div class="mui-spinner">
                </div>
              </div>
            </div>
          </div>

        </div>
        <div id="item3mobile" class="mui-slider-item mui-control-content">
          <div id="scroll3" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="mui-loading">
                <div class="mui-spinner">
                </div>
              </div>
            </div>
          </div>

        </div>
        <div id="item4mobile" class="mui-slider-item mui-control-content">
          <div id="scroll3" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="mui-loading">
                <div class="mui-spinner">
                </div>
              </div>
            </div>
          </div>

        </div>
        <div id="item5mobile" class="mui-slider-item mui-control-content">
          <div id="scroll3" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="mui-loading">
                <div class="mui-spinner">
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <ul class="mui-table-view mui-table-view-chevron db-movie-list" id="pullrefresh">
        <li class="mui-table-view-cell mui-media item" v-for="(item,index) in movies" v:key="item.id" @tap="itemTap(item.id)">
          <a>
            <div class="num">{{index+start+1}}</div>
            <img class="mui-media-object mui-pull-left" :src="item.images.large">
            <div class="mui-media-body">
              {{item.title}}
              <p class='mui-ellipsis'>{{item.genres}} <span>{{item.rating.average}}分</span></p>
              <p class='mui-ellipsis'>导演：{{item.directors[0].name}}</p>
              <p class='mui-ellipsis'>主演：{{item.actors}}</p>
            </div>
          </a>
        </li>
      </ul>
    </div>





  </div>
  <script src="../js/mui.min.js"></script>
  <script src="../js/vue.js"></script>
  <script>
    mui.init();
    let moviesDetail;
    mui.plusReady(function () {

      moviesDetail = plus.webview.getWebviewById("topDetail"); //详细页的窗口对象
      if (!moviesDetail) {
        console.log(1);
        // 预加载页面
        moviesDetail = mui.preload({ //预加载自动创建了窗口，加载了文件
          url: '../pages/movieDetail.html',
          id: "topDetail" //这个也是webview的id

        })
      }
    })
	function showWaiting(){
		mui.plusReady(function () {
		    plus.nativeUI.showWaiting("加载中...");
		})
	}
	function closeWaiting(){
		mui.plusReady(function () {
			plus.nativeUI.closeWaiting();
			})
		
	}
    let app = new Vue({
      el: "#app",
      data: {
        movies: [],
		page:1,
        start: 0,
		end:49
      },
      methods: {
        getMovies() {
         showWaiting();
          mui.getJSON('http://t.yushu.im/v2/movie/top250', {
            start: this.start, // 起始记录的下标，第1页第1条记录是 0
            count: 50, // 每页显示的条数
          }, function (data) { //json对象
            //服务器返回响应，根据响应结果，分析是否登录成功；
            // console.log(JSON.stringify(data)); // 输出json字符串进行调试
            let total = data.total;
            let subjects = data.subjects;
            if (subjects.length > 0) {
              subjects.forEach((v) => {
                // 对电影类型genres进行操作，转成 / 拼接
                v.genres = v.genres.join("/")
                // console.log(v.genres);
                let arr = [];
                // 抽离出主演
                v.casts.forEach((item) => {
                  arr.push(item.name)
                })
                v.actors = arr.join('/');
                // console.log(v.actors);
              })
              // 赋值
              app.movies = subjects;
            }
			closeWaiting();
          }, function (xhr, type, errorThrown) {
            //异常处理；
            console.log(type);
			closeWaiting();
          });
        },
        tapTop(start) {
          this.start = start;
          this.getMovies();
        },
        slideTop(e) {
          // console.log(JSON.stringify(e.detail))
          switch (e.detail.slideNumber) {
          case 0:
            this.start = 0;
            break;
          case 1:
            this.start = 50;
            break;
          case 2:
            this.start = 100;
            break;
          case 3:
            this.start = 150;
            break;
          case 4:
            this.start = 200;
            break;
          }
          this.getMovies()

        },
        itemTap(id) {
          // mui.fire(目标窗口的webview,'自定义事件名',{参数列表})
          mui.fire(moviesDetail, 'getMovie', {
            mid: id
          })

          // mui 提供打开窗口的方法
          mui.openWindow({ // 打开窗口之前
            // url: '../pages/movieDetail.html'
            id: 'topDetail'
          });
        }
      }
	  // ,
   //    created() {
   //      this.getMovies()
   //    }
    })
	app.getMovies();
	
	
  </script>
</body>

</html>